<template>
    <div class="clinicaltrial">
        <Header/>
        <div class="second_show">
            <div class="img"></div>
            <div class="pages_w1470">
                 <div class="second_show_text">
                     <img src="../assets/temp/clinicaltrial.svg">
                 </div>
             </div>
             <i class="tips"></i>
        </div>
        <div class="second_box"  v-if="menudata">
            <img src="../assets/images/s2.png" class="strengths-r">
            <img src="../assets/images/s2.png" class="strengths-l">
            <div class="pages_w1145">
                <!--PC端显示-->
                <div class="swiper-news-list opacity" v-if='isMobile==0' data-uk-scrollspy="{cls:'uk-animation-slide-top',delay:300}">
                   <swiper :options="swiperOption">

                        <!--swiper-slide-->
                        <swiper-slide v-for="(items,indexs) in listTemp(9,menudata.data)" :key="indexs">
                            <ul class="ul news_list fl-clr">
                                <li v-for="(item,index) in items" :key="index">
                                    <router-link :to="{path:item.source}"  class="box scale">
                                        <div class="img"><img :src="$store.state.domain+item.pic"></div>
                                        <div class="time">{{item.intime|gdate('yyyy/MM/dd')}}</div>
                                        <div class="title">{{item.name}}</div>
                                    </router-link>
                                </li>
                            </ul>
                        </swiper-slide>

                    </swiper>
                    <div class="bottom">
                        <div class="a swiper-next"></div>
                        <div class="a swiper-prev"></div>
                        <div class="swiper-pagination"></div>
                    </div>
                    <div class="swiper_more"><img src="../assets/images/more.svg"></div>
                </div>

                <!--移动端显示-->
                <div v-if='isMobile==1'>
                    <ul class="ul news_list fl-clr" data-web="newslist">
<transition-group tag="div" name="gslide">
                        <li  v-for="(item,index) in menudata.data" :key="index" v-show="Math.floor(index/6)<=gnodes">
                            <router-link :to="{path:item.source}" class="box scale">
                                <div class="img"><img :src="$store.state.domain+item.pic"></div>
                                <div class="time">{{item.intime|gdate('yyyy/MM/dd')}}</div>
                                <div class="title" v-html="item.name"></div>
                            </router-link>
                        </li>
</transition-group>
                    </ul>
                    <a href="javascript:void(0);" ref="gnext" @click="myclick(menudata.data)" class="more_bnt"><span>展开更多</span></a>
                </div>
                <!--移动端显示 end-->
            </div>
        </div>

        <Footer/>

    </div>
</template>


<script>
import Header from '../components/Header.vue'
import Footer from '../components/Footer.vue'
import gscroll from '../js/gscroll.js'
export default {
    components: {
       Footer,Header
    },
    data () {
        return {
            gnodes: 0,
            isMobile:0, //pc:0 web:1
            swiperOption:{
                slidesPerView:1,
                spaceBetween:0,
                pagination: {
                    el: '.swiper-news-list .swiper-pagination',
                    clickable :true
                },
                navigation: {
                   nextEl: '.swiper-news-list .swiper-prev',
                   prevEl: '.swiper-news-list .swiper-next',
                }
            }
        }
    },
    methods: {
         myclick: function(datas){
            var gpages = Math.ceil(Object.keys(datas).length/6)-1;
            this.gnodes = this.gnodes+1;
            if(this.gnodes>=gpages){
                this.gnodes = gpages;
                $('.more_bnt').html('已加载完').addClass("no");
            }
            this.$emit('myclick');
        }
    },
    computed: {
        listTemp: function(){
            return function(counts,datas){
                let index =0;
                let count = counts?counts:9;
                let arrTemp = [];
                let experts = datas;
                for(let i=0;i<Object.keys(datas).length;i++){
                    index = parseInt(i/count);
                    if (arrTemp.length <= index) {
                        arrTemp.push([]);
                  }
                  arrTemp[index].push(experts[i])
                }
                return arrTemp
            }
        },
        menudata() {
            if(JSON.stringify(this.$store.getters.getmenudata(3)).length>100){
                return this.$store.getters.getmenudata(3)
            }else{
                return false
            }
        },
        
        menulistconfig() {
            return this.$store.getters.getmenuconfig
        }
    },
    mounted () {


        let gthat = this;
        let gposition ={x:0,y:0};
        document.addEventListener('touchstart',function(e){gposition.y = e.touches[0].pageY}, false);
        let gfunction = function(e){gscroll.gscroll(e,2,gthat,gposition)};
        window.addEventListener('touchend',gfunction,false);


        $('.second_show .tips').fadeIn(1000)
        $('.second_show').addClass("show")
        if (isMobile()) {
          this.isMobile=1
        } else {
          this.isMobile=0
        }
        function isMobile() {
              let flag = navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i)
              return flag;
        }
    }
}
</script>
